require("../css/common.css")
require("../css/login.less")
require("../lib/captcha/captcha-mini.js")

//验证码
let captcha1 = new CaptchaMini({
    lineWidth: 1,   //线条宽度
    lineNum: 8,       //线条数量
    dotR: 2,          //点的半径
    dotNum: 15,       //点的数量
    fontSize: 30,           //字体大小
    length: 5
});
let ver=null
captcha1.draw(document.querySelector('#captcha1'), r => {
    console.log(r, '验证码1');
    ver=r
});
console.log(ver);
document.ready(function () {
    // 点击切换
    let zcbox = document.querySelector("#login .zc span")
    let dlbox = document.querySelector("#register .zc span")
    let loginbox = document.querySelector("#login")
    let registerbox = document.querySelector("#register")
    zcbox.addEventListener("click", function () {
        loginbox.style.display = "none"
        registerbox.style.display = "block"
    })
    dlbox.addEventListener("click", function () {
        loginbox.style.display = "block"
        registerbox.style.display = "none"
    })
    // ------------------------表单验证----------------------
// 注册页面
let phonebox=document.querySelector("#register input.phone")
let verifybox=document.querySelector("#register input.verify")
let passbox=document.querySelector("#register input.pass")
let pass2box=document.querySelector("#register input.pass2")
let logun= document.querySelector("#register .logun")
let phoneflag=null
let passflag=null
let verifyflag=null
let pass2flag=null
function checkregister(root, arg, str){
    root.addEventListener("blur", function () {
        if (root.value.trim() == '') {
            console.log(str);
            root.value = ""
            return
        }
        if (arg == "phone") {
            // 账号的规则验证
            let bool = window.$utils.getPhone(root.value)
            if (bool) {
                root.style.border = "green 1px solid"
                phoneflag = true
            } else {
                root.style.border = "red 1px solid"
                phoneflag = false
            }
        }else if (arg == "pass") {
            // 账号的规则验证
            let bool = window.$utils.getPass(root.value)
            if (bool) {
                root.style.border = "green 1px solid"
                passflag = true
                if(pass2box.value==passbox.value){
                    pass2box.style.border = "green 1px solid"
                    pass2flag = true
                }else{
                    pass2box.style.border = "red 1px solid"
                    pass2flag =false
                }
            }else{
                root.style.border = "red 1px solid"
                passflag = false
            }
       }
 })
}
//处理手机号
checkregister(phonebox, "phone", "手机号不能为空")
//处理密码
checkregister(passbox, "pass", "密码不能为空")
//处理验证码
verifybox.addEventListener("blur",function(){
    if(verifybox.value==ver){
        this.style.border = "green 1px solid"
        verifyflag = true
    }else{
        this.style.border = "red 1px solid"
        verifyflag =false
    }
})
pass2box.addEventListener("blur",function(){
    if(pass2box.value==passbox.value){
        this.style.border = "green 1px solid"
        pass2flag = true
    }else{
        pass2flag =false
    }
})
//验证表单提交
logun.addEventListener("click", function (event) {
    phonebox.focus()
    verifybox.focus()
    passbox.focus()
    pass2box.focus()
    phonebox.blur()
    verifybox.blur()
    passbox.blur()
    pass2box.blur()
    let bool = phoneflag && passflag&&verifyflag&&pass2flag
    if (bool) {
        event.preventDefault()
        window.$http.post("/users/add",{
            account:phonebox.value,
            password:passbox.value
        },function(res){
            console.log(res);
            if(res.status==0){
                window.$utils.toast(res.status,res.msg,"注册",function(){
                    loginbox.style.display = "block"
                    registerbox.style.display = "none"
                })
            }else{
                window.$utils.toast(res.status,res.msg,"注册")
            }
        })
    }else{
        event.preventDefault()
    }
})
/* ----------------------登录页面--------------------------------- */
    //账号
    let uname = document.querySelector("#login input.uname")
    //密码
    let upass = document.querySelector("#login input.upass")
    //登录
    let logbox=document.querySelector("#login .log")
    let unameflag = null
    let upassflag = null
    function checkVerify(root, arg, str){
        root.addEventListener("blur", function () {
            if (root.value.trim() == '') {
                console.log(str);
                root.value = ""
                return
            }
            if (arg == "users") {
                // 账号的规则验证
                let bool = window.$utils.getPhone(root.value)
                if (bool) {
                    root.style.border = "green 1px solid"
                    unameflag = true
                } else {
                    root.style.border = "red 1px solid"
                    unameflag = false
                }
            }else if (arg == "pass") {
                // 账号的规则验证
                let bool = window.$utils.getPass(root.value)
                if (bool) {
                    root.style.border = "green 1px solid"
                   upassflag = true
                } else {
                    root.style.border = "red 1px solid"
                    upassflag = false
                }
           }
     })
    }
    checkVerify(uname,"users","账号不能为空")
    checkVerify(upass,"pass","密码不能为空")

//验证表单提交
logbox.addEventListener("click", function (event){
    uname.focus()
    upass.focus()
    uname.blur()
    upass.blur()
    let bool = upassflag && unameflag
    if (bool) {
        event.preventDefault()
        window.$http.post("/users/login",{
            account:uname.value,
            password:upass.value
        },function(res){
            console.log(res);
            if(res.status==0){
                window.$utils.toast(res.status,res.msg,"登录",function(){
                    window.localStorage.setItem("token",res.data.token)
                    window.localStorage.setItem("user",JSON.stringify(res.data.user))
                    location.href="../index.html"
                })
            }else{
                window.$utils.toast(res.status,res.msg,"登录")
            }
        })
    }else{
        event.preventDefault()
    }
})

})
